<template>
	<div class="container">
		<div class="header">
			<el-card>
				<div style="margin: 20px;box-sizing: border-box;">推广设置</div>
			</el-card>
		</div>
		<!-- 用户列表 -->
		<div class="mian-table">
			<!-- <el-button @click="jjj" type="success">修改推广</el-button> -->
			<div style="padding: 20px;width: 100%;">
				<div class="showInfo">
					<div class="showInfo-item">
						<span>百分比：</span>
						<!-- <span>{{tableData.bfb}}</span> -->
						<el-input v-model="bfb" placeholder="请输入百分比"></el-input>
					</div>
					<div class="showInfo-item">
						<span>推荐介绍：</span>
						<span>{{tableData.content}}</span>
					</div>
				</div>
			</div>
			<div class="richText">
				<vue-editor v-model="content"></vue-editor>
			</div>

		</div>

		<div class="footer">
			<el-button @click="updateTuiguang" type="success">提交修改</el-button>
			<!-- <el-pagination align="center" background @size-change="handleSizeChange"
				@current-change="handleCurrentChange" :current-page.sync="form.pageNo" :page-size="form.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination> -->
		</div>
	</div>
</template>
<script>
	import {
		tuiguanginfo,
		tuiguangupdate
	} from "@/api/proSetting.js";
	import {
		title
	} from "@/settings";
	import {
		datefilter
	} from '@/utils/arrToObj'
	import {
		getUserList
	} from "@/api/userMangement.js";
	import {
		VueEditor
	} from 'vue2-editor';
	export default {
		components: {
			VueEditor
		},
		data() {
			return {
				formLabelWidth: '100px',
				currentPage: 1,
				pageSize: 1,
				tableData: [],

				form: {

				},
				content: '',
				bfb:''



			}
		},
		filters: {
			datefilter(val) {
				if (val) {
					var date = new Date(parseInt(val) * 1000);
					var Year = date.getFullYear();
					var Moth =
						date.getMonth() + 1 < 10 ?
						"0" + (date.getMonth() + 1) :
						date.getMonth() + 1;
					var Day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
					var Hour =
						date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
					var Minute =
						date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
					var Sechond =
						date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
					var GMT =
						Year +
						"-" +
						Moth +
						"-" +
						Day +
						"   " +
						Hour +
						":" +
						Minute +
						":" +
						Sechond;

					return GMT;
				} else {
					return "";
				}
			},
		},
		mounted() {
			this.getList();
		},
		methods: {
			reloadForm() {
				this.getList();
			},

			// 获取日志列表
			async getList() {
				this.loading = true;
				let result = await tuiguanginfo();
				
				// console.log('zzzzzzzzzzz', result)
				this.bfb = result.data.bfb;
				this.content = result.data.content;
			},
		
		
			
			async updateTuiguang() {
				let param = {
					bfb: this.bfb,
					content: this.content
				}
				let result = await tuiguangupdate(param);
				if(result.code=='0') {
					this.$message({
						type:'success',
						message:"修改成功！"
					})
				}
				// console.log('xxxxxxxxxxxx', result)
			}

		},
	}
</script>
<style>
	/* @import 'vue2-editor/dist/vue2-editor.css'; */
	.header {
		font-size: 18px;
		font-weight: 400
	}

	.container {
		background-color: #EBEEF5
	}

	.mian-table {
		height: 693px;
		margin: 20px;
		background-color: white;
		padding: 20px;

		.add-drawer-btn {
			padding: 20px 0 20px 20px;
			position: absolute;
			bottom: 0;
			right: 5%;
			text-align: right
		}

		.opera-table {
			padding-right: 20px;
			padding-bottom: 20px;

			.table {
				width: 100%;
				margin: 10px;
			}
		}

		.form-item {
			width: 250px;
		}
	}

	.footer {
		height: 3%;
		background-color: white;
		/* text-align: center; */
		padding: 20px
	}

	.showInfo-item {
		display: flex;
		margin: 20px;
		align-items: center;
	}

	.showInfo-item span:first-child {
		display: inline-block;
		width: 80px;
		text-align: left;
		font-size: 14px;
		color: #999999;
	}

	.showInfo-item span:nth-child(2) {}

	.richText {
		height: 300px;
		overflow-y: scroll;
	}
</style>